/**
 * 此插件是针对ums列表表头固定而开发，目前支持谷歌浏览器
 */
(function ($) {
    $.fn.fixedTableHead = function (option) {
        var explorer = navigator.userAgent;
        if (explorer.indexOf("Chrome") == -1) {
            return this;// 不是谷歌浏览器就算了吧，抽空再来做兼容
        }
        this.op = {
            classNames: "table table-hover table-bordered table-striped table-condensed flip-content dataTable ryb-dataTable"// ums 数据表格固定class
        };
        $.extend(this.op, option);//可能有的列表有其他的class，加载默认class的后面
        // 当前DOM元素
        var that = this;
        // 当前DOM元素的jQuery对象
        var $this = $(that);
        // 唯一标识
        var uuid = Math.randomStr();
        // 移除已经生成的固定表头
        $("." + $this.attr("fixedTableHead")).remove();
        // 给当前元素标记本次使用的uuid
        $this.attr("fixedTableHead", uuid);
        // 滚动条宽度
        var scrollWidth;
        try {
            scrollWidth = $this.get(0).offsetWidth - $this.get(0).clientWidth;
        } catch (e) {
            return false;
        }
        // 数据表格的表头
        var $orgThead = $this.find("thead:first");
        // 固定表头元素
        var $fixedThead = $('<div class="fixedTableHead ' + uuid + '" fxiedFor="' + uuid + '" style="z-index: 11;overflow:hidden;height:' + $orgThead.height() + 'px;width:' + ($this.outerWidth() - scrollWidth) + 'px"></div>')
            .append($('<div class="table-scrollable table-scrollable-' + uuid + '" style="overflow-y: auto;"></div>')
                .append('<table class="' + this.op.classNames + ' dataTable' + uuid + '" style="width: ' + ($this.find("table").outerWidth()) + 'px;"><thead class="fixedHead"><tr></tr></thead></table>'));
        // 生成固定表头
        $this.parent().append($fixedThead);
        // 数据表格恢复为滚动状态
        $this.scrollTop(0);
        $this.scrollLeft(0);
        // 设置固定表头位置为原始数据表格表头位置
        $fixedThead.offset({
            left: $orgThead.offset().left - 1,
            top: $orgThead.offset().top
        });
        // 数据表格滚动时固定表头联动
        $("[fixedTableHead=" + uuid + "]").scroll(function () {
            $("." + uuid + " .table-scrollable-" + uuid).scrollLeft($("[fixedTableHead=" + uuid + "]").scrollLeft());
        });
        // 禁止固定表头单独滚动
        $("." + uuid + " .table-scrollable-" + uuid).scroll(function () {
            $("." + uuid + " .table-scrollable-" + uuid).scrollLeft($("[fixedTableHead=" + uuid + "]").scrollLeft());
        });
        // 设置固定表头各个th的宽度，目前有很微小的误差，抽空再深究
        this.autoWidth = function () {
            $orgThead.find("th").map(function (index, th) {
                    var $orgTh = $(th);
                    var uuidForTh = Math.randomStr();
                    // 将th的指定属性复制给固定表头对应的th
                    var attrs = "";
                    var attributes = th.attributes;
                    for (var i = 0, len = attributes.length; i < len; i++) {
                        var attr = attributes[i];
                        if (attr) {
                            attrs += attr.name + "='" + attr.value + "' ";
                        }
                    }
                    // 记录下固定表头th的标识
                    $orgTh.attr("fixedTh", uuidForTh);
                    // 故去数据表格表头的常用样式属性
                    var width = $orgTh.innerWidth() + 2;
                    var height = $orgTh.innerHeight();

                    var borderLeft = $orgTh.css("borderLeft");
                    var borderRight = $orgTh.css("borderRight");
                    var borderTop = $orgTh.css("borderTop");
                    var borderBottom = $orgTh.css("borderBottom");

                    var marginLeft = $orgTh.css("marginLeft");
                    var marginRight = $orgTh.css("marginRight");
                    var marginTop = $orgTh.css("marginTop");
                    var marginBottom = $orgTh.css("marginBottom");

                    var paddingLeft = $orgTh.css("paddingLeft");
                    var paddingRight = $orgTh.css("paddingRight");
                    var paddingTop = $orgTh.css("paddingTop");
                    var paddingBottom = $orgTh.css("paddingBottom");

                    // 拼接样式
                    var style = "" +

                        "width:" + width + "px;" +
                        "height:" + height + "px;" +

                        "border-left:" + borderLeft + ";" +
                        "border-right:" + borderRight + ";" +
                        "border-top:" + borderTop + ";" +
                        "border-bottom:" + borderBottom + ";" +

                        "margin-left:" + marginLeft + ";" +
                        "margin-right:" + marginRight + ";" +
                        "margin-top:" + marginTop + ";" +
                        "margin-bottom:" + marginBottom + ";" +

                        "padding-left:" + paddingLeft + ";" +
                        "padding-right:" + paddingRight + ";" +
                        "padding-top:" + paddingTop + ";" +
                        "padding-bottom:" + paddingBottom + ";";
                    // 固定表头th元素
                    var fixedTh = $('<th ' + attrs + ' style="' + style + '" orgTh="' + uuidForTh + '">' + $orgTh.html() + '</th>');
                    // 生成固定表头内容
                    $fixedThead.find("thead tr:first").append(fixedTh);
                    // 复制单击事件,主要复制单击是排序的事件
                    fixedTh.click(function () {
                        $orgTh.click();
                        // 复制原始th的class属性
                        var ascSelector = ".orderIcons .asc";
                        var descSelector = ".orderIcons .desc";
                        fixedTh.find(ascSelector).attr("class", $orgTh.find(ascSelector).attr("class"));
                        fixedTh.find(descSelector).attr("class", $orgTh.find(descSelector).attr("class"));
                    });
                }
            );
        };
        // 自动适应宽度
        this.autoWidth();
        return this;
    }
})
(jQuery);